.scoreMain {
  .scoreHeader {
    @apply w-screen flex items-center flex-col relative justify-end;
    height: 24.0625vw;
    background-image: url('/images/score-title-bg.webp');
    background-size: 100% 100%;

    .header {
      @apply flex items-center justify-center relative;
      width: 14.8vw;
      height: 14.8vw;

      .imgBg {
        @apply w-full h-full absolute left-0 top-0;
        animation: rotates 5s infinite linear;
      }

      .img {
        width: 6.77vw;
        height: 6.77vw;
      }
    }

    .score {
      @apply flex items-center mb-5;

      .span1 {
        @apply text-white text-white leading-10;
        font-family: Alibaba PuHuiTi 2;
        font-size: 2.08vw;
      }

      .span2 {
        @apply font-bold leading-10;
        font-size: 2.08vw;
        font-family: Source Han Sans;
        font-variation-settings: 'opsz' auto;
        font-feature-settings: 'kern' on;
        background: linear-gradient(180deg, #fff9db 0%, #ffd04e 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
      }

      .img {
        width: 2.08vw;
        height: 2.08vw;
        margin-left: 0.625rem;
      }
    }

    .menu {
      @apply flex mb-10;

      .menuItem {
        @apply flex items-center cursor-pointer;

        span {
          @apply text-2xl text-theme font-medium mr-1;
          font-family: Source Han Sans;

          &:hover {
            @apply underline;
          }
        }

        img {
          @apply w-6 h-6;
        }
      }
    }
  }

  .task {
    @apply flex flex-wrap justify-center mx-auto;
    margin-top: 3.75rem;
    max-width: 87.5rem;
    min-height: 12.5rem;

    .tasksItem {
      @apply mb-10 flex justify-between px-10 items-center;
      width: 40.625rem;
      height: 10.25rem;
      border-radius: 0.625rem;
      background: #262626;

      &.itemFake {
        @apply h-0 bg-transparent;
      }

      &:nth-child(2n + 1) {
        @apply self-start;
        @apply mr-10;
        align-self: flex-start !important;
      }

      .tips {
        @apply flex items-center flex-wrap text-white-80;
        font-family: PingFang SC;
        font-size: 1.625rem;
        line-height: 1.625rem;

        .type {
          @apply inline-block rounded px-1 text-lg ml-6;
          line-height: 1.625rem;
          height: 1.625rem;
          background: rgba(166, 220, 111, 0.2);
          color: #a6dc6f;
        }

        .typeRed {
          color: #ff8a8a;
          background: rgba(255, 138, 138, 0.2);
        }
      }

      .jifen {
        @apply flex items-center mt-5;

        .img {
          width: 1.625rem;
          height: 1.625rem;
          margin-right: 0.625rem;
        }

        .span {
          font-family: Source Han Sans;
          font-size: 1.625rem;
          font-weight: 500;
          nt-variation-settings: 'opsz' auto;
          font-feature-settings: 'kern' on;
          background: linear-gradient(180deg, #fff9db 0%, #ffd04e 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          text-fill-color: transparent;
        }
      }

      .btn {
        @apply h-10 leading-10 text-base text-white text-center rounded cursor-pointer shrink-0;
        font-family: Alibaba PuHuiTi 2;
        width: 8.75rem;
        background: linear-gradient(90deg, #ff651d 0%, #ffb521 100%);

        &.toFinish:hover {
          background: #e7511d;
        }

        &.finished {
          @apply cursor-default;
          background: #434343;
          color: #999999;
        }
      }
    }
  }

  .noMore {
    @apply text-center text-sm text-white-60;
    font-family: Alibaba PuHuiTi 2;
    line-height: 0.875rem;
    margin-top: 3.75rem;
  }
}

@keyframes rotates {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media screen and (min-width: 77.5rem) and (max-width: 87.5rem) {
  .scoreMain {
    .task {
      .tasksItem {
        width: 37.5rem;

        .tips {
          @apply h-6 text-2xl leading-6;

          .type {
            @apply leading-6 h-6 ml-4;
          }
        }
      }
    }
  }
}

@media screen and (min-width: 68.75rem) and (max-width: 77.5rem) {
  .scoreMain {
    .task {
      .tasksItem {
        width: 31.25rem;

        .tips {
          @apply text-xl leading-5;

          .type {
            @apply leading-5 h-5 text-base ml-4;
          }
        }
      }
    }
  }
}

@media screen and (min-width: 55rem) and (max-width: 68.75rem) {
  .scoreMain {
    .task {
      .tasksItem {
        @apply mb-6 px-6;
        width: 25rem;

        &:nth-child(2n + 1) {
          @apply mr-6;
        }

        p.tips {
          @apply text-xl leading-5;

          .type {
            @apply leading-5 h-5 text-base ml-4;
          }
        }

        .jifen {
          @apply mt-5;

          .img {
            @apply h-6 w-6;
          }

          .span {
            font-size: 1.5rem;
          }
        }

        .btn {
          @apply h-8 leading-8;
          width: 7.5rem;
        }
      }
    }
  }
}

@media screen and (min-width: 48rem) and (max-width: 55rem) {
  .scoreMain {
    .task {
      .tasksItem {
        @apply mb-4 px-4;
        width: 21.25rem;

        &:nth-child(2n + 1) {
          @apply mr-4;
        }

        .tips {
          @apply text-xl leading-5;

          .type {
            @apply leading-5 h-5 text-sm ml-4;
          }
        }

        .jifen {
          @apply mt-5;

          .img {
            @apply h-5 w-5;
          }

          .span {
            font-size: 1.25rem;
          }
        }

        .btn {
          @apply h-8 leading-8;
          width: 7.5rem;
        }
      }
    }
  }
}

@media screen and (max-width: 48rem) {
  .scoreMain {
    .scoreHeader {
      margin-top: 5.875rem;
      height: 66.667vw;
      background-image: url('/images/score-title-bg-h5.webp');

      .header {
        @apply flex items-center justify-center relative;
        width: 8.875rem;
        height: 8.875rem;

        .imgBg {
          @apply w-full h-full absolute left-0 top-0;
          animation: rotates 5s infinite linear;
        }

        .img {
          width: 5.0625rem;
          height: 5.0625rem;
        }
      }

      .score {
        @apply flex items-center mb-5;

        .span1 {
          @apply text-xl leading-5;
        }

        .span2 {
          @apply leading-5 text-xl;
        }

        .img {
          @apply w-5 h-5;
          margin-left: 0.625rem;
        }
      }

      .menu {
        @apply mb-5;

        .menuItem {
          span {
            @apply text-base;
          }

          img {
            @apply w-4 h-4;
          }
        }
      }
    }

    .task {
      @apply mt-10;

      .tasksItem {
        @apply mb-4 px-4;
        width: calc(100% - 2rem);
        height: 7.25rem;
        &:nth-child(2n + 1) {
          @apply mr-0;
        }

        .tips {
          @apply mr-2 text-base;
          line-height: 1.125rem;

          .type {
            @apply text-xs ml-2;
            line-height: 1.375rem;
            height: 1.375rem;
          }
        }

        .jifen {
          @apply mt-4;

          .img {
            @apply w-5 h-5;
            margin-right: 0.625rem;
          }

          .span {
            font-size: 1.25rem;
          }
        }

        .btn {
          @apply h-8 leading-8 text-sm;
          width: 5rem;
        }
      }
    }

    .noMore {
      @apply mt-10;
    }
  }
}
